<template>
  <div class="drawAlert">
    <div class="alertBg" @click="cancel"></div>
    <div class="alertTxt">
      <div class="closeImgDiv" @click="cancel"><img src="/static/images/user/guanbi.png"></div>
      <h3>请输入提现美豆</h3>
      <div class="drawInput">
        <input type="number" placeholder="请输入提现美豆" v-model="drawNumber">
      </div>
      <div class="drawRule">
        <p>当前提现比例：0.1</p>
        <p>每次最少提现10美豆</p>
        <p>每天提现限额888美豆</p>
      </div>
      <div class="comfirmDraw" @click="_comfirmDraw">提现</div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        drawNumber: '',
      }
    },
    methods:{
      _comfirmDraw(){
        if(this.drawNumber){
          this.cancel()
          this.$http.post(`agentWithdraw/${this.drawNumber}/withdraw`).then((res)=>{
            if(res.data.code == 0){
              this.wxAlert(res.data.data)
            }else{
              this.wxAlert(res.data.msg)
            }
          })
        }else{
          this.wxAlert("请输入提现美豆")
        }
      },
      cancel(){
        this.$emit("cancel") 
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      }
    }
  }
</script>

<style scoped>
.drawAlert{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.alertBg{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  opacity: 0.6;
  top: 0;
  z-index: 3;
}
.alertTxt{
  padding: 0 35rpx;
  background: #fff;
  width: 500rpx;
  height: auto;
  position: relative;
  z-index: 4;
  border-radius: 10rpx;
  overflow: hidden;
}
.alertTxt .closeImgDiv{
  margin-top: 20rpx;
  width: 100%;
  height: 30rpx;
  position: relative;
  z-index: 4;
}
.alertTxt .closeImgDiv img{
  width: 30rpx;
  height: 30rpx;
  display: block;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
}
.alertTxt>h3{
  font-size: 30rpx;
  color: #343434;
  margin: 15rpx 0;
  text-align: center;
}
.alertTxt .drawInput input{
  width: auto;
  height: 54rpx;
  border: 1px solid rgba(223,223,223,1);
  border-radius: 8rpx;
  padding: 0 10rpx;
  font-size: 30rpx;
  color: #535353;
}
.alertTxt .drawRule{
  margin-top: 10rpx;
}
.alertTxt .drawRule p{
  line-height: 50rpx;
  font-size: 26rpx;
  color: #535353;
}
.alertTxt .comfirmDraw{
  width: 100%;
  height: 60rpx;
  color: #FFFFFF;
  font-size: 30rpx;
  background-color: #AAD1D6;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50rpx 0 20rpx;
}
</style>
